<template>
  <page-header-wrapper>
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" class="table-head-ground">
          <div class="table-layer">
            <jeepay-text-up :placeholder="'商户号'" :msg="searchData.mchNo" v-model="searchData.mchNo"/>
            <jeepay-text-up :placeholder="'商户名称'" :msg="searchData.mchName" v-model="searchData.mchName"/>
            <jeepay-text-up :placeholder="'结汇ID'" :msg="searchData.drawId" v-model="searchData.drawId" />
            <a-form-model-item label="" class="table-head-layout">
              <a-select v-model="searchData.state" placeholder="结汇状态" default-value="">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="0">待处理</a-select-option>
                <a-select-option value="1">未通过</a-select-option>
                <a-select-option value="2">待打款</a-select-option>
                <a-select-option value="3">已打款</a-select-option>
                <a-select-option value="4">打款失败</a-select-option>
              </a-select>
            </a-form-model-item>
            <span class="table-page-search-submitButtons">
              <a-button type="primary" icon="search" @click="queryFunc" :loading="btnLoading">查询</a-button>
              <a-button style="margin-left: 8px" icon="reload" @click="() => this.searchData = {}">重置</a-button>
            </span>
          </div>
        </a-form>
      </div>

      <!-- 列表渲染 -->
      <JeepayTable
        @btnLoadClose="btnLoading=false"
        ref="infoTable"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="searchData"
        rowKey="drawId"
      >
        <template slot="entryTypeSlot" slot-scope="{record}">
          {{ record | handleEntryType }}
        </template>
        <template slot="drawAmountSlot" slot-scope="{record}">
          {{ `${record ? record.toFixed(2) : ''}` }}
        </template>
        <template slot="mchFeeAmountSlot" slot-scope="{record}">
          {{ `${record ? record.toFixed(2) : '0.00'}` }}
        </template>
        <template slot="drawAmountToSlot" slot-scope="{record}">
          {{ `${record ? record.toFixed(2) : ''}` }}
        </template>
        <template slot="amountSlot" slot-scope="{record}">
          {{ `${record ? record.toFixed(2) : ''}` }}
        </template>
        <template slot="exchangeRateSlot" slot-scope="{record}">
          {{ `${record ? '1:' + record.toFixed(2) : ''}` }}
        </template>
        <template slot="stateSlot" slot-scope="{record}">
          <a-tag
            :key="record"
            :color="record < stateColor.length ? stateColor[record] :'volcano'"
          >
            {{ record < stateText.length ? stateText[record] :'未知' }}
          </a-tag>
        </template>
        <template slot="opSlot" slot-scope="{record}">  <!-- 操作列插槽 -->
          <JeepayTableColumns>
            <a-button type="link" v-if="$access('ENT_MCH_DRAW_AUDIT')" @click="editFunc(record.drawId)">{{ record.state=== 0 || record.state=== 2 ? '修改':'详情' }}</a-button>
          </JeepayTableColumns>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 新增页面组件  -->
    <!-- <InfoAddOrEdit ref="infoAddOrEdit" :callbackFunc="searchFunc"/> -->
    <!-- 支付参数配置页面组件  -->
    <!-- <IsvPayIfConfigList ref="isvPayIfConfigList" /> -->
    <!-- 日志详情抽屉 -->
    <template>
      <a-drawer
        width="50%"
        placement="right"
        :closable="true"
        :visible="visible"
        :title="visible === true? '提汇详情':''"
        @close="onClose"
      >
        <a-form-model ref="FROM" :model="detailData" :rules="detailData.state===0||detailData.state===2?rules:{}">
          <a-form-model-item label="结汇ID" prop="drawId">
            {{ detailData.drawId }}
          </a-form-model-item>
          <a-form-model-item label="应用ID">
            {{ detailData.appId }}
          </a-form-model-item>
          <a-form-model-item label="货币代码">
            <a-input v-if="detailData.state===0||detailData.state===2" v-model="detailData.currency" :disabled="true" size="large"></a-input>
            <span v-else>{{ detailData.currency }}</span>
          </a-form-model-item>
          <a-form-model-item label="结汇时总资产" v-show="detailData.state!=0">
            {{ detailData.nowBalance }}
          </a-form-model-item>
          <a-form-model-item label="结汇时当日交易" v-show="detailData.state!=0">
            {{ detailData.dayBalance }}
          </a-form-model-item>
          <!--  -->
          <a-form-model-item label="提汇资产" prop="drawAmountTo">
            <a-input v-if="detailData.state===0||detailData.state===2" v-model="detailData.drawAmountTo" :disabled="true" ></a-input>
            <span v-else>{{ detailData.drawAmountTo }}</span>
            <div v-if="detailData.state!==0">
              <span>{{ '结汇时可提汇最大为额:' }}</span>
              <span>{{ `${(detailData.nowBalance-detailData.dayBalance).toFixed(2)}` }}</span>
            </div>
          </a-form-model-item>
          <!--  -->
          <a-form-model-item label="手续费">
            {{ detailData.mchFeeAmount }}
          </a-form-model-item>
          <a-form-model-item label="提汇实扣">
            {{ detailData.drawAmountTo }}
          </a-form-model-item>
          <!--  -->
          <a-form-model-item label="收款方式" prop="state">
            <a-input v-if="detailData.state===0||detailData.state===2" :value="detailData.entryType|handleEntryType" :disabled="true" ></a-input>
            <span v-else>{{ detailData.entryType|handleEntryType }}</span>
          </a-form-model-item>
          <a-form-model-item label="收款账号" prop="accountNo">
            <a-input v-if="detailData.state===0||detailData.state===2" :value="detailData.accountNo" :disabled="true" ></a-input>
            <span v-else>{{ detailData.accountNo }}</span>
          </a-form-model-item>
          <a-form-model-item label="提汇备注">
            <a-textarea :value="detailData.drawDesc" :disabled="true"/>
          </a-form-model-item>
          <a-form-model-item label="结汇状态" prop="state">
            <a-radio-group v-model="state" v-if="detailData.state===0||detailData.state===2">
              <a-radio :value="1">不通过</a-radio>
              <a-radio :value="2">待打款</a-radio>
              <a-radio :value="3">已打款</a-radio>
              <a-radio :value="4">打款失败</a-radio>
            </a-radio-group>
            <a-tag
              v-else
              :key="detailData.state"
              :color="detailData.state < stateColor.length ? stateColor[detailData.state] :'volcano'">
              {{ detailData.state < stateText.length ? stateText[detailData.state] :'未知' }}
            </a-tag>
          </a-form-model-item>
          <a-form-model-item label="打款汇率">
            <a-input v-if="detailData.state===0||detailData.state===2" v-model="detailData.exchangeRate" placeholder="请输入 最多2位小数的数字"></a-input><span v-else>{{ `${detailData.exchangeRate ? '1:' + detailData.exchangeRate : ''}` }}</span>
          </a-form-model-item>
          <a-form-model-item label="打款数额">
            <a-input v-if="detailData.state===0||detailData.state===2" v-model="detailData.amount" placeholder="请输入 最多2位小数的数字"></a-input><span v-else>{{ detailData.amount }}</span>
          </a-form-model-item>
          <a-form-model-item label="备注">
            <a-input type="textarea" :disabled="detailData.state===3?true:false" v-model="detailData.auditDesc" :placeholder="`${detailData.state===3?'':'请输入 结汇状态 相关的描述信息'}`"/>
          </a-form-model-item>
        </a-form-model>
        <a-divider />
        <div class="drawer-btn-center">
          <div v-if="detailData.state==0||detailData.state===2">
            <a-button @click="onClose" :style="{ marginRight: '8px' }" icon="close">
              取消
            </a-button>
            <a-button type="primary" @click="onSubmit" :loading="btnLoading" icon="check">
              保存
            </a-button>
          </div>
          <a-button @click="onClose" icon="close" v-else>
            关闭
          </a-button>
        </div>
      </a-drawer>
    </template>
  </page-header-wrapper>
</template>
<script>
import drawTable from '@/components/drawTable/drawTable'
import JeepayTextUp from '@/components/JeepayTextUp/JeepayTextUp' // 文字上移组件
import JeepayTableColumns from '@/components/JeepayTable/JeepayTableColumns'
import { API_URL_MCH_DRAW, req } from '@/api/manage'
import JeepayTable from '@/components/JeepayTable/JeepayTable'

// eslint-disable-next-line no-unused-vars
const tableColumns = [
  { key: 'drawId', title: '结汇ID', dataIndex: 'drawId', width: '200px' },
  { key: 'mchNo', title: '商户号', dataIndex: 'mchNo', width: '200px' },
  { key: 'mchName', title: '商户名称', dataIndex: 'mchName', width: '200px' },
  { key: 'currency', title: '币种', dataIndex: 'currency', width: '100px' },
  { key: 'drawAmount', dataIndex: 'drawAmount', title: '结汇金额', width: '100px', scopedSlots: { customRender: 'drawAmountSlot' } },
  { key: 'mchFeeAmount', dataIndex: 'mchFeeAmount', title: '结汇手续费', width: '100px', scopedSlots: { customRender: 'mchFeeAmountSlot' } },
  { key: 'drawAmountTo', dataIndex: 'drawAmountTo', title: '结汇总金额', width: '100px', scopedSlots: { customRender: 'drawAmountToSlot' } },
  { key: 'entryType', dataIndex: 'entryType', title: '收款方式', width: '120px', scopedSlots: { customRender: 'entryTypeSlot' } },
  { key: 'accountNo', dataIndex: 'accountNo', title: '收款账号', width: '220px' },
  { key: 'amount', dataIndex: 'amount', title: '打款数额', width: '120px', scopedSlots: { customRender: 'amountSlot' } },
  { key: 'exchangeRate', dataIndex: 'exchangeRate', title: '打款汇率', width: '100px', scopedSlots: { customRender: 'exchangeRateSlot' } },
  { key: 'state', dataIndex: 'state', title: '状态', width: '80px', scopedSlots: { customRender: 'stateSlot' } },
  { key: 'createdAt', dataIndex: 'createdAt', title: '创建时间', width: '150px' },
  { key: 'updatedAt', dataIndex: 'updatedAt', title: '打款时间', width: '150px' },
  { key: 'op', title: '操作', width: '100px', fixed: 'right', align: 'center', scopedSlots: { customRender: 'opSlot' } }
]

export default {
  name: 'IsvListPage',
  components: { drawTable, JeepayTableColumns, JeepayTextUp, JeepayTable },
  data () {
    return {
      btnLoading: false,
      tableColumns: tableColumns,
      searchData: {},
      detailData: {},
      visible: false,
      // stateColor: ['blue', 'cyan', 'orange', 'green', 'red'],
      stateColor: ['blue', 'red', 'orange', 'green', 'red'],
      stateText: ['待处理', '未通过', '待打款', '已打款', '打款失败'],
      rules: {
        drawAmountTo: [{ required: true, trigger: 'blur' }],
        state: [{ required: true, trigger: 'blur' }],
        accountNo: [{ required: true, trigger: 'blur' }]
      },
      state: 0
    }
  },
  filters: {
    handleEntryType (val) {
      switch (val) {
        case 'PAYOUT_ACCOUNT':
          return '代付账户'
        case 'TRC20':
          return 'U-TRC20'
        case 'ERC20':
          return 'U-ERC20'
        case 'BANK_CARD':
          return '银行卡'
        default:
          break
      }
    }
  },
  mounted () {
  },
  methods: {
    onSubmit () {
      this.$refs.FROM.validate(valid => {
        if (valid) {
          req.updateById(API_URL_MCH_DRAW, this.detailData.drawId, { ...this.detailData, state: this.state }).then(res => {
            this.queryFunc()
            this.onClose()
          }).catch(err => {
            console.log(err, 'err')
          })
        }
      })
    },
    queryFunc () {
      this.btnLoading = true
      this.$refs.infoTable.refTable(true)
    },
    // 请求table接口数据
    reqTableDataFunc: (params) => {
      return req.list(API_URL_MCH_DRAW, params)
    },
    searchFunc: function () { // 点击【查询】按钮点击事件
      this.$refs.infoTable.refTable(true)
    },
    editFunc: function (drawId) {
        const that = this
        req.getById(API_URL_MCH_DRAW, drawId).then(res => {
            that.detailData = res
            that.stateValue = res.state
        })
        this.visible = true
    },
    onClose: function () {
        this.visible = false
        this.state = null
        this.detailData = {}
    }
  }
}
</script>
<style>
.ant-form-item {
    display: flex;
}
.ant-form-item-label {
    width: 130px;
}
/* .ant-form-item-label {
  width: ;
} */
.ant-form-item-control-wrapper {
  flex: 2;
}
</style>
